<template>
    <div>
        <div id="mycharts" style="width: 600px;height:400px;">

        </div>
    </div>
</template>

<script>
export default {
    name: "money",
    data(){
        return{
            x_data: [],
            ls: [652.2]
        }
    },
    methods:{
        showModal() {
            this.socket = new WebSocket(`ws:127.0.0.1:8000/rtmoney/`)
            this.socket.onopen = function (e){
                console.log('连接成功')
            }
            this.socket.onmessage = this.websocketonmessage
        },
        websocketonmessage(e){
            let dataJson = JSON.parse(e.data)
            console.log(dataJson)
            if(dataJson.state==0){
                this.x_data = dataJson.data.time
                let hu = []
                for(var i of dataJson.data.hui){
                    hu.push(parseFloat(i))
                }
                this.ls = hu
            }
            else if(dataJson.state==1){
                this.x_data.push(dataJson.time)
                this.ls.push(parseFloat(dataJson.json))
            }

            let myChart = this.$echarts.init(document.getElementById('mycharts'))

            myChart.setOption({
                title: {text: '美元汇率'},
                tooltip:{},
                xAxis:{
                    data: this.x_data
                },
                yAxis:{
                    type: 'value',
                    min: 1,
                    max: 30
                },
                series:[{
                    name: '汇率',
                    type: 'line',
                    data: this.ls
                }]
            })
        }
    },
    mounted() {
        this.showModal()

    }
}
</script>

<style scoped>

</style>
